<template>
  <div class="app-container">
    <el-form
      ref="settingForm"
      :model="settingForm"
      :rules="settingRules"
      label-width="200px"
    >
      <el-form-item label="是否启用电子卡" prop="cardEnabledFlag">
        <el-radio-group v-model="settingForm.cardEnabledFlag">
          <el-radio label="0">关闭</el-radio>
          <el-radio label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>

      <div v-show="settingForm.cardEnabledFlag == 1">
        <el-form-item label="启用哪种电子卡">
          <el-checkbox-group
            v-model="settingForm.cardOilsTypeList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">汽油卡</el-checkbox>
            <el-checkbox label="2">柴油卡</el-checkbox>
            <el-checkbox label="3">LNG卡</el-checkbox>
            <el-checkbox label="4">CNG卡</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <div style="width: 900px; margin-left: 90px; margin-bottom: 40px">
          <div style="text-align: right">
            <el-button
              type="primary"
              @click="handleAdd"
              size="mini"
              style="margin-bottom: 20px; margin-right: 50px"
            >
              新 增 规 则
            </el-button>
          </div>
          <el-table :data="settingForm.detailList">
            <af-table-column
              label="电子卡"
              align="left"
              :formatter="oilNameFormatter"
            />
            <af-table-column label="条件" align="left" prop="discountAmtTerm">
              <template slot-scope="scope1">
                {{ scope1.row.discountAmtStart }}≤充值金额(元)&lt;{{
                  scope1.row.discountAmtEnd
                }}
              </template>
            </af-table-column>

            <af-table-column label="赠送" align="left">
              <template slot-scope="scope">
                {{
                  scope.row.settingRuleType == 1
                    ? "按金额赠送"
                    : scope.row.settingRuleType == 2
                    ? "按比例赠送"
                    : ""
                }}
                --- 额度为 {{ scope.row.presentAmt }}
                {{
                  scope.row.settingRuleType == "1"
                    ? "元"
                    : scope.row.settingRuleType == "2"
                    ? "%"
                    : ""
                }}
              </template>
            </af-table-column>
            <af-table-column label="生效状态" align="left">
              <template slot-scope="scope">
                {{ effective(scope.row.cardType) }}
              </template>
            </af-table-column>
            <af-table-column
              label="操作"
              align="left"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </af-table-column>
          </el-table>
        </div>

        <el-form-item label="充值活动" required prop="discountTimeSetting">
          <el-radio-group v-model="settingForm.discountTimeSetting">
            <el-radio label="0">关闭</el-radio>
            <el-radio label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-show="settingForm.discountTimeSetting == 1">
          <el-form-item
            label="活动的周期类型"
            prop="discountTimeType"
            :required="settingForm.discountTimeSetting == 1"
          >
            <el-select
              v-model="settingForm.discountTimeType"
              clearable
              size="mini"
              @change="timeClear"
            >
              <el-option label="每周指定日" value="1"></el-option>
              <el-option label="每月指定日" value="2"></el-option>
              <el-option label="固定活动日" value="3"></el-option>
            </el-select>
            <div
              v-show="settingForm.discountTimeType != 3"
              style="
                display: flex;
                flex-wrap: wrap;
                border-style: solid;
                border-color: #f5f7fa;
              "
            >
              <div
                v-for="(item, index) in timeSelect[
                  settingForm.discountTimeType
                ]"
                :key="index"
                style="margin: 3px"
              >
                <div
                  class="hover-style"
                  style="
                    border-radius: 5px;
                    font-weight: bold;
                    font-size: 12px;
                    cursor: pointer;
                  "
                  @click="timeClickCalendar(index)"
                >
                  <div>{{ item }}</div>
                  <div
                    v-if="settingForm.collectClickCalendar.indexOf(index) > -1"
                    style="
                      width: 4px;
                      height: 4px;
                      border-radius: 50%;
                      background-color: red;
                      position: relative;
                      left: calc(50% - 2px);
                    "
                  ></div>
                  <div v-else style="width: 4px; height: 4px"></div>
                </div>
              </div>
            </div>
            <div v-show="settingForm.discountTimeType == 3">
              <el-date-picker
                clearable
                size="small"
                style="margin-left: 10px; width: 200px"
                v-model="settingForm.collectClickDay"
                type="dates"
                value-format="yyyy-MM-dd"
                placeholder="选择提醒时间设置"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item
            label="活动的赠送比例"
            prop="presentScale"
            :required="settingForm.discountTimeSetting == 1"
          >
            <el-input
              v-model="settingForm.presentScale"
              placeholder="请输入赠送比例"
              style="width: 70px"
            />%
          </el-form-item>
        </div>

        <el-form-item
          label="汽油卡叠加的方案"
          v-if="settingForm.cardOilsTypeList.includes('1')"
        >
          <el-checkbox-group
            v-model="settingForm.gasolineRuleList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">营销优惠</el-checkbox>
            <el-checkbox label="2">等级优惠</el-checkbox>
            <el-checkbox label="3">标签优惠</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="柴油卡叠加的方案"
          v-if="settingForm.cardOilsTypeList.includes('2')"
        >
          <el-checkbox-group
            v-model="settingForm.dieselOilRuleList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">营销优惠</el-checkbox>
            <el-checkbox label="2">等级优惠</el-checkbox>
            <el-checkbox label="3">标签优惠</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          label="LNG卡叠加的方案"
          v-if="settingForm.cardOilsTypeList.includes('3')"
        >
          <el-checkbox-group
            v-model="settingForm.LNGRuleList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">营销优惠</el-checkbox>
            <el-checkbox label="2">等级优惠</el-checkbox>
            <el-checkbox label="3">标签优惠</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          label="LNG卡叠加的方案"
          v-if="settingForm.cardOilsTypeList.includes('4')"
        >
          <el-checkbox-group
            v-model="settingForm.CNGRuleList"
            @change="effectiveRefresh"
          >
            <el-checkbox label="1">营销优惠</el-checkbox>
            <el-checkbox label="2">等级优惠</el-checkbox>
            <el-checkbox label="3">标签优惠</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!--
        <el-form-item
          prop="isMarket"
          label="是否叠加优惠方案"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isMarket">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          prop="isMarket"
          label="是否叠加优惠方案"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isMarket">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="isGradeSetting"
          label="是否叠加等级优惠"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isGradeSetting">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>
        -->
        <!-- <el-form-item
          prop="isDiscountCoupon"
          label="是否叠加优惠券"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isDiscountCoupon">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!--
        <el-form-item
          prop="isLabel"
          label="是否叠加标签"
          :required="settingForm.cardEnabledFlag == 1"
        >
          <el-radio-group v-model="settingForm.isLabel">
            <el-radio label="1">叠加</el-radio>
            <el-radio label="0">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>
        -->
        <el-form-item
          prop="enjoyIntegralMultiple"
          label="支付产生积分倍数"
          :required="settingForm.cardEnabledFlag == 1"
        >
          电子卡支付产生的积分数量是微信支付产生积分数量的
          <el-input
            v-model="settingForm.enjoyIntegralMultiple"
            style="width: 60px"
            size="mini"
          />倍
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" size="mini"
        >确 定</el-button
      >
    </div>

    <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-form
        ref="infoForm"
        :model="infoForm"
        :rules="infoRules"
        label-width="120px"
      >
        <el-form-item label="电子卡" prop="cardType" required>
          <el-select
            v-model="infoForm.cardType"
            placeholder="请选择电子卡"
            clearable
            size="mini"
          >
            <el-option label="汽油卡" value="1"></el-option>
            <el-option label="柴油卡" value="2"></el-option>
            <el-option label="非油品卡" value="3"></el-option>
            <el-option label="LNG卡" value="4"></el-option>
            <el-option label="CNG卡" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="条件设置" prop="discountAmtEnd" required>
          <el-input-number
            v-model="infoForm.discountAmtStart"
            size="mini"
            style="width: 120px"
          />
          <span>≤ 充值金额(元) &lt;</span>
          <el-input-number
            v-model="infoForm.discountAmtEnd"
            size="mini"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item label="赠送方式" prop="presentAmt" required>
          <div>
            <el-select
              v-model="infoForm.settingRuleType"
              placeholder="请选择赠送方式"
              size="mini"
            >
              <el-option label="按金额赠送" value="1"></el-option>
              <el-option label="按比例赠送" value="2"></el-option>
            </el-select>
            <div v-show="!!this.infoForm.settingRuleType">
              <el-input
                v-model="infoForm.presentAmt"
                style="width: 100px"
                size="mini"
              />
              <span>{{
                this.infoForm.settingRuleType == "1"
                  ? "元"
                  : this.infoForm.settingRuleType == "2"
                  ? "%"
                  : ""
              }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div>
            <div style="color: red">例：</div>
            <div style="color: red">按赠送金额：充100赠送10元</div>
            <div style="color: red">按赠送比例：充100赠送10%</div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addItem">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addSetting,
  updateSetting,
  selectCustomerCardSetting,
} from "@/api/customer/cardSetting";
export default {
  name: "Dzk_Rule",
  data() {
    const validateCardType = (rule, value, callback) => {
      if (!this.infoForm.cardType) {
        callback(new Error("请选择电子卡"));
        return;
      }
      callback();
    };
    const validateDiscountAmtEnd = (rule, value, callback) => {
      if (!this.infoForm.discountAmtStart) {
        callback(new Error("请填写条件的开始金额"));
        return;
      }
      if (!this.infoForm.discountAmtEnd) {
        callback(new Error("请填写条件的结束金额"));
        return;
      }
      const start = +this.infoForm.discountAmtStart;
      const end = +this.infoForm.discountAmtEnd;
      if (start >= end) {
        callback(new Error("请填写条件的逻辑合理性"));
        return;
      }
      callback();
    };
    const validatePresentAmt = (rule, value, callback) => {
      if (!this.infoForm.settingRuleType) {
        callback(new Error("请选择赠送方式"));
        return;
      }
      if (!this.infoForm.presentAmt) {
        callback(new Error("请填写赠送值"));
        return;
      }
      callback();
    };
    const validateDiscountTimeType = (rule, value, callback) => {
      if (this.settingForm.discountTimeSetting == 0) {
        callback();
        return;
      }
      if (!this.settingForm.discountTimeType) {
        callback(new Error("请选择活动的周期类型"));
        return;
      }
      if (
        this.settingForm.discountTimeType == 1 ||
        this.settingForm.discountTimeType == 2
      ) {
        if (this.settingForm.collectClickCalendar.length <= 0) {
          callback(new Error("请选择活动的时间"));
          return;
        }
      }
      if (this.settingForm.discountTimeType == 3) {
        if (
          this.settingForm.collectClickDay == null ||
          this.settingForm.collectClickDay.length <= 0
        ) {
          callback(new Error("请填写活动时间"));
          return;
        }
      }
      callback();
    };
    return {
      title: "",
      // 表单参数
      settingForm: {
        detailList: [],
        collectClickCalendar: [], // 收集固定日期选择的日子
        collectClickDay: [],
        cardOilsType: [],
        cardOilsTypeList: [],

        gasolineRuleList: [],
        dieselOilRuleList: [],
        LNGRuleList: [],
        CNGRuleList: [],
      },

      itemIndex: null,
      open: false,
      infoForm: {},
      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "01",
          "02",
          "03",
          "04",
          "05",
          "06",
          "07",
          "08",
          "09",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "20",
          "21",
          "22",
          "23",
          "24",
          "25",
          "26",
          "27",
          "28",
          "29",
          "30",
          "31",
        ],
      ],
      infoRules: {
        cardType: [{ validator: validateCardType, trigger: "change" }],
        discountAmtEnd: [
          { validator: validateDiscountAmtEnd, trigger: "change" },
        ],
        presentAmt: [{ validator: validatePresentAmt, trigger: "change" }],
      },
      settingRules: {
        cardEnabledFlag: [
          {
            required: true,
            message: "请选择是否启用电子卡",
            trigger: "change",
          },
        ],
        presentScale: [{ trigger: "change" }],
        discountTimeType: [
          { validator: validateDiscountTimeType, trigger: "change" },
        ],
        discountTimeSetting: [
          {
            required: true,
            message: "请选择是否启用电子卡",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      selectCustomerCardSetting().then((response) => {
        this.settingForm = response.data;

        this.settingForm.collectClickCalendar = [];
        this.settingForm.collectClickDay = "";
        if (this.settingForm.cardOilsType == null) {
          this.settingForm.cardOilsType = "";
        }
        // const cardOilsType = this.settingForm.cardOilsType
        //   .split(",")
        //   .filter((ele) => {
        //     return ele != "";
        //   });
        this.settingForm.cardOilsType = [];
        this.settingForm.cardOilsTypeList = [];
        this.settingForm.dieselOilRuleList = [];
        this.settingForm.gasolineRuleList = [];
        this.settingForm.LNGRuleList = [];
        this.settingForm.CNGRuleList = [];

        if (
          this.settingForm.discountTimeType == "1" ||
          this.settingForm.discountTimeType == "2"
        ) {
          this.settingForm.collectClickCalendar = this.settingForm.discountTime
            .split(",")
            .map(parseFloat);
        } else if (this.settingForm.discountTimeType == "3") {
          if (this.settingForm.discountTime.length == 0) {
            this.settingForm.collectClickDay = [];
          } else {
            this.settingForm.collectClickDay =
              this.settingForm.discountTime.split(",");
          }
        }
        this.settingForm = { ...this.settingForm };
      });
    },
    timeClear() {
      this.settingForm.collectClickCalendar = [];
      this.settingForm.collectClickDay = [];
    },
    effectiveRefresh(e) {
      this.settingForm = { ...this.settingForm };
    },
    effective(no) {
      return this.settingForm.cardOilsType.includes(no) ? "生效中" : "未生效";
    },
    timeClickCalendar(index) {
      if (this.settingForm.collectClickCalendar.indexOf(index) === -1) {
        this.settingForm.collectClickCalendar.push(index);
      } else if (this.settingForm.collectClickCalendar.indexOf(index) > -1) {
        const temp = this.settingForm.collectClickCalendar.findIndex((ele) => {
          return ele == index;
        });
        this.settingForm.collectClickCalendar.splice(temp, 1);
      }
      this.$refs.settingForm.validateField("discountTimeType");
      this.settingForm = { ...this.settingForm };
    },
    oilNameFormatter(row, column) {
      if (row.cardType === "1") {
        return "汽油卡";
      } else if (row.cardType === "2") {
        return "柴油卡";
      } else if (row.cardType === "3") {
        return "非油品卡";
      } else if (row.cardType === "4") {
        return "LNG卡";
      } else if (row.cardType === "5") {
        return "CNG卡";
      } else {
        return row.cardType;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.itemIndex = this.settingForm.detailList.length;
      this.open = true;
      this.title = "添加电子卡充值规则";
    },
    /** 修改按钮操作 */
    handleUpdate(index, row) {
      this.itemIndex = index;
      this.infoForm = JSON.parse(JSON.stringify(row));
      this.open = true;
      this.title = "修改电子卡充值规则";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["settingForm"].validate((valid) => {
        if (valid) {
          this.settingForm.cardOilsType =
            this.settingForm.cardOilsType.toString();
          if (
            this.settingForm.discountTimeType == "1" ||
            this.settingForm.discountTimeType == "2"
          ) {
            this.settingForm.discountTime =
              this.settingForm.collectClickCalendar.toString();
          } else {
            this.settingForm.discountTime =
              this.settingForm.collectClickDay.toString();
          }
          if (this.settingForm.id != null) {
            updateSetting(this.settingForm).then((response) => {
              this.msgSuccess("修改成功");
              this.init();
            });
          } else {
            addSetting(this.settingForm).then((response) => {
              this.msgSuccess("新增成功");
              this.init();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(index) {
      this.settingForm.detailList.splice(index, 1);
    },

    addItem() {
      this.$refs["infoForm"].validate((valid) => {
        if (valid) {
          this.settingForm.detailList.splice(this.itemIndex, 1, this.infoForm);
          this.infoForm = {};
          this.open = false;
        }
      });
    },
  },
};
</script>
